/**
 * Created by wuyunan on 2017/5/19.
 */
import React from "react";

import PropTypes from "prop-types";
import {
  StyleSheet, Text, TouchableOpacity, View, Image,
} from "react-native";
import {
  Color, FontSize, ScreenWidth, scale,
} from "../../common/index";

const ChooseItem = props => {
  const {
    onPress, disabled, style, title, desc, marginTop,
  } = props;

  return (
    <TouchableOpacity onPress={onPress} disabled={disabled} style={{ marginTop }}>
      <View style={[styles.container, style]}>
        <View style={styles.rowConatiner}>
          {title && <Text style={styles.text_title}>{title}</Text>}
          {desc && <Text style={styles.text_desc}>{desc}</Text>}
        </View>
        <Image source={require("../../img/ic_arrow_right.png")} style={styles.arrow} />
      </View>
    </TouchableOpacity>
  );
};
ChooseItem.defaultProps = {
  disabled: false,
  marginTop: 0,
  onPress: () => {},
};
ChooseItem.propsTypes = {
  title: PropTypes.string,
  marginTop: PropTypes.number,
  desc: PropTypes.string,
  onPress: PropTypes.func,
  disabled: PropTypes.bool,
};

const styles = StyleSheet.create({
  container: {
    width: ScreenWidth,
    height: scale * 48,
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
    paddingLeft: scale * 16,
    paddingRight: scale * 14,
    backgroundColor: Color.white,
  },
  rowConatiner: {
    alignItems: "center",
    flexDirection: "row",
  },
  text_title: {
    color: Color.text_assist,
    fontSize: FontSize.SIZE_14,
  },
  text_desc: {
    color: Color.text_title,
    marginLeft: scale * 18,
    fontSize: FontSize.SIZE_14,
  },
  arrow: {
    width: scale * 24,
    height: scale * 24,
    marginLeft: scale * 5,
  },
});
export default ChooseItem;
